<!-- MainLayout.vue -->
<template>
  <div id="app" class="wrapper">
    <Navbar />
    <div class="container-fluid content">
      <router-view />
    </div>
    <Footer />
  </div>
</template>

<script>
import Navbar from "@/components/NavbarComponent.vue";
import Footer from "@/components/FooterComponent.vue";

export default {
  components: {
    Navbar,
    Footer,
  },
};
</script>

<style scoped>
#app {
  background-image: url("../assets/images/day-bg.svg"); /* 设置背景图片路径 */
  background-size: cover; /* 背景图覆盖整个元素区域 */
  background-position: center; /* 背景图居中显示 */
  background-repeat: no-repeat; /* 禁止背景图重复 */
  height: 100vh; /* 视口高度，使背景占满整个视口 */
  min-height: 100%; /* 确保最小高度为父元素的高度 */
}
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex-grow: 1;
}
</style>